<template>
	<view class="pageBox">
		<view class="main">
			<view class="total flex-center" @click="goDetails">
				<view class="totalText">
					原始仓单 200张
				</view>

			</view>

			<view class="listBox">
				<view class="listTitle flex-row">
					<view class="title flex-center">
						数量
					</view>
					<view class="title flex-center">
						备注
					</view>
					<view class="title flex-center">
						时间
					</view>
				</view>

				<view class="list">
					<view class="listItem flex-row" v-for="(item,index) in 8" :key="index">
						<view class="item flex-center">
							100张
						</view>
						<view class="item flex-center">
							B类赠送积分兑换
						</view>
						<view class="item flex-center">
						10/21 12:32:23
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
	
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #f9f9f9;

		.main {
			padding: 20rpx 32rpx 0;

			.total {
				width: 100%;
				padding: 18rpx 40rpx 18rpx 42rpx;
				background-color: #ffffff;
				border-radius: 16rpx;

				.totalText {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 40rpx;
				}

				.trans {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 44rpx;
					width: 160rpx;
					height: 56rpx;
					background: #F2615F;
					border-radius: 16rpx;
					padding: 0;
					margin: 0;
					border: none;
				}
			}

			.listBox {
				width: 100%;
				margin-top: 38rpx;

				.listTitle {
					.title {
						flex: 1;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
					}

					.title:nth-of-type(1) {
						width: 30%;
					}

					.title:nth-of-type(2) {
						width: 35%;
					}

					.title:nth-of-type(3) {
						width: 35%;
					}
				}

				.list {
					padding-top: 20rpx;

					.listItem {
						.item {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 40rpx;
							margin-top: 28rpx;
							word-break: break-all;
							
						}

						.item:nth-of-type(1) {
							width: 30%;
						}

						.item:nth-of-type(2) {
							width: 35%;
							flex-direction: column;
						}

						.item:nth-of-type(3) {
							width: 35%;
							flex-direction: column;
						}
					}
				}
			}
		}

	}
</style>
